<template>
  <div>
    <div style="position: fixed;top: 50%;left: 20px;">
      <el-button type="text" href="#subPage" :underline="false" v-bind:disabled="first" @click="changePage(-1)">
        <div id="subPage">
          <i class="el-icon-arrow-left" style="font-size: 50px"/>
        </div>
      </el-button>
    </div>
    <div style="position: fixed;top: 50%;right: 20px;">
      <el-button type="text" href="#addPage" :underline="false" v-bind:disabled="last" @click="changePage(1)">
        <div id="addPage">
          <i class="el-icon-arrow-right" style="font-size: 50px"/>
        </div>
      </el-button>
    </div>
    <div v-bind:key="i" v-bind:id="user.id" v-for="(user,i) in userList"
         class="shadow-needed"
         style="width: 1000px;height: 120px;border-radius:10px;display: flex;margin-top: 20px;margin-left: auto;margin-right: auto">
      <div style="padding-left: 20px;padding-top: 20px">
        <div style="line-height: 23px">ID</div>
        <div style="margin-top: 20px">{{user.id}}</div>
      </div>
      <div style="padding-left: 20px;padding-top: 20px">
        <div style="line-height: 23px">创建时间</div>
        <div style="line-height: 23px;margin-top: 10px;">
          <el-input :disabled="true" v-model="user.dateCreated"></el-input>
        </div>
      </div>
      <div style="padding-left: 20px;padding-top: 20px">
        <div style="line-height: 23px">用户名</div>
        <div style="line-height: 23px;margin-top: 10px">
          <el-input v-model="user.name"></el-input>
        </div>
      </div>
      <div style="padding-left: 20px;padding-top: 20px">
        <div style="line-height: 23px">密码</div>
        <div style="line-height: 23px;margin-top: 10px">
          <el-input v-model="user.password" placeholder="placeholder"></el-input>
        </div>
      </div>
      <div>
        <el-button @click="saveModify(user)" style="margin-top: 53px;margin-left: 20px" type="success">保存修改</el-button>
      </div>
      <div>
        <el-button @click="deleteUser(user)" style="margin-top: 53px;margin-left: 20px" type="danger">删除</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "UserManage",
    data() {
      return {
        userList: [],
        first: true,
        last: false,
        pageNumber: 1,
        limit: 15,
      }
    },
    methods: {
      getData() {
        this.$http({
          url: 'http://localhost:18080/user/?page=' + this.pageNumber + '&limit=' + this.limit,
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'get'
        }).then(response => {
          this.userList = response.data['content'];
          this.first = response.data['first'];
          this.last = response.data['last']
        })
      },
      changePage(i) {
        this.$http({
          url: 'http://localhost:18080/user/?page=' + (this.pageNumber+parseInt(i)) + '&limit=' + this.limit,
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'get'
        }).then(response => {
          this.userList = response.data['content'];
          this.pageNumber+=parseInt(i);
          this.first = response.data['first'];
          this.last = response.data['last']
        })
      },
      saveModify(user) {
        this.$http({
          url: 'http://localhost:18080/user/' + user.id,
          headers: {
            'Content-Type': 'application/json'
          },
          data:JSON.stringify(user),
          method: 'PUT'
        }).then(() => {
          this.$message({
            type:'success',
            message:'保存成功'
          })
        })
      },
      deleteUser(user) {
        this.$http({
          url: 'http://localhost:18080/user/' + user.id,
          headers: {
            'Content-Type': 'application/json'
          },
          method: 'DELETE'
        }).then(() => {
          document.getElementById("" + user.id).style.display = "none";
          this.$message({
            type:'success',
            message:'删除成功'
          })
        })
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>

<style scoped>
  .shadow-needed {
    box-shadow: #666d70 0 0 5px;
  }

  .shadow-needed:hover {
    box-shadow: #253c45 0 0 10px;
  }
  /* 滚动槽 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 3px;
    background: rgba(0,0,0,0.06);
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.08);
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,0,0,0.12);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  }
</style>
